<template>
  <div class="columnChart">
      <div class="chart_bd" id="column"></div>
  </div>
</template>

<script>
var columnChart;
export default {
  name: 'columnChart',
  props: ['salaryData'],
  data () {
      return {
          columnChart: ''
      }
  },
  watch: {
      salaryData: function (newQuestion, oldQuestion) {
       this.initLineChart();
      }
  },
  mounted () {
      this.initLineChart()
  },
  methods: {
      initLineChart () {
        columnChart = this.$echarts.getInstanceByDom(document.getElementById('column'))
        if (columnChart === undefined) {
            columnChart = this.$echarts.init(document.getElementById('column'));
        }
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#fff'
                    }
                }
            },
            grid: {
                top: 40,
                left: 50,
                right: 50,
                bottom: 40
            },
            xAxis: [
                {
                    type: 'category',
                    name: '（k）',
                    data: ['0-1', '1-1.5', '1.5-2', '2-2.5', '2.5-3', '3-3.5', '3.5-4', '4-4.5', '4.5-5', '>5'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLine: {
                        lineStyle: {    //坐标线
                            color: '#808080'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '单位（人）',
                    min: 0,
                    interval: 1,
                    axisLabel: {
                        margin: 15,
                        formatter: '{value}'
                    },
                    axisLine: {
                        lineStyle: {    //坐标线
                            color: '#808080'
                        }
                    },
                    splitLine: {            //坐标轴分割线
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: '#808080'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    data: this.salaryData
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        columnChart.setOption(option);
      },
      resizeChart () {
          columnChart.resize()
      }
  },
  beforeDestroy () {
      this.$echarts.dispose(columnChart);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.columnChart{
    height: 100%;
}
.chart_bd {
    height: 100%;
}
</style>
